<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
<style type="text/css">
</style>
</head>
<body>
<div id="jcontent" class="jcontent">
	<ul class="ulform">
		<li class="ulform-li line-b vcenter">
			<i class="iconfont icon-pp licon"></i>
			<span class="ulform-label">车辆品牌</span>
			<select id="vehicle-brand" class="ulform-rli">
				<option value="-1">请选择</option>
			</select>
		</li>
		<li class="ulform-li line-b vcenter">
			<i class="iconfont icon-xilie licon"></i>
			<span class="ulform-label">车辆系列</span>
			<select id="vehicle-series" class="ulform-rli">
				<option value="-1">请选择</option>
			</select>
		</li>
		<li class="ulform-li line-b vcenter">
			<i class="iconfont icon-leixing licon"></i>
			<span class="ulform-label">车辆型号</span>
			<select id="vehicle-model" class="ulform-rli">
				<option value="-1">请选择</option>
			</select>
		</li>
		<li class="ulform-li line-b vcenter">
			<i class="iconfont icon-cp licon"></i>
			<span class="ulform-label">车牌号码</span>
			<input id="chepai" type="text" class="ulform-rli ulform-rli-input" placeholder="请输入车牌号码" value=""/>
		</li>
		<li class="ulform-li line-b vcenter">
			<i class="iconfont icon-riqi licon"></i>
			<span class="ulform-label">购买日期</span>
			<input value="" readonly="readonly" id="goumairiqi" type="text" class="ulform-rli cqline-b ulform-rli-input" placeholder="请选择正确的购买日期"/>
		</li>
	</ul>
	<a id="addmycars-btn" class="blockbtn">保存车辆</a>
</div>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function(){
	window.setTimeout(function(){
		inits();
	},360);
});


function inits(){
	//加载品牌
	loadPP();
	//日期选择
	mui('#jcontent').on('tap','.cqline-b', function(e) {
		e.preventDefault();
		pickDate();
	});
	//为车品牌绑定change事件
	mui('#jcontent').on('change','#vehicle-brand', function() {
		loadXL();
	});
	//为车系绑定change事件
	mui('#jcontent').on('change','#vehicle-series', function() {
		loadXH();
	});
	
	//为保存按钮添加tap事件
	mui('#jcontent').on('tap','#addmycars-btn', function(event) {
		save();
	});
}

//保存数据
function save(){
	
	if(checkField()){
		webapp.ajax({
			url:"/carLife/admin/interface/carMessage/saveMyCar",
			data:{
				brandId :document.getElementById("vehicle-brand").value,
				seriesId:document.getElementById("vehicle-series").value,
				modelId :document.getElementById("vehicle-model").value,
				licensePlate:document.getElementById("chepai").value,  
				purchaseDate:document.getElementById("goumairiqi").value
			},
			success:function(json){
				webapp.debug(json);
				if(json.code == '200'){
					mui.toast("添加成功！");
					mui.fire(plus.webview.getWebviewById("common-sub"),"loadList");
					window.setTimeout(function(){
						plus.webview.getTopWebview().hide("auto");
					},300);
				}else{
					mui.toast(json.msg);
				}
			}
		});
	}
}


//加载系列
function loadXL(){
	webapp.showWaiting();
	var brandId = document.getElementById("vehicle-brand").value;
	webapp.ajax({
		url:"/carLife/admin/interface/sysSeries/selectByBrandId",
		data:{
			brandId:brandId
		},
		success:function(json){
			if(json.code == '200'){
				var html = template("vehicle-tpl",json); 
				var veBranbr=document.getElementById("vehicle-series");					
				veBranbr.innerHTML=html
			}
			webapp.closeWaiting();
		}
	});
}

//加载型号
function loadXH(){
	seriesId = document.getElementById("vehicle-series").value;
	webapp.ajax({
		url:"/carLife/admin/interface/sysModel/selectBySeriesId",
		data:{
			token:webapp.getToken(),
			seriesId:seriesId
		},
		success:function(json){
			if(json.code == '200'){
				var html = template("vehicle-tpl",json);
				var veBranbr=document.getElementById("vehicle-model");					
				veBranbr.innerHTML=html
			}
		}
	});
}

//加载车辆品牌数据
function loadPP(){
	webapp.ajax({
		url:"/carLife/admin/interface/sysBrand/selectAllBrand",
		success:function(json){
			if(json.code == '200'){
				var html = template("vehicle-tpl",json);
				var veBranbr=document.getElementById("vehicle-brand");					
				veBranbr.innerHTML=html
			}
		}
	});
}
//加载日期控件
function pickDate(){
	plus.nativeUI.pickDate( function(e){
		var d=e.date;
		var cqTime=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
		document.getElementById("goumairiqi").value=cqTime;;
	},function(e){
//		console.log( "未选择日期："+e.message );
	});			
}

function checkField(){
	var chepai=document.getElementById("chepai").value;
	var goumairiqi=document.getElementById("goumairiqi").value;
	if(document.getElementById("vehicle-brand").value == "-1"){
		plus.nativeUI.toast("请选择汽车品牌！");
		return false;
	}else if(document.getElementById("vehicle-series").value == "-1"){
		plus.nativeUI.toast("请选择车系！");
		return false;
	}else if(document.getElementById("vehicle-model").value == "-1"){
		plus.nativeUI.toast("请选择车型！");
		return false;
	}else if(webapp.util.isNull(chepai)){
		plus.nativeUI.toast("请添加车牌号码！");
		return false;
	}else if(webapp.util.isNull(goumairiqi)){
		plus.nativeUI.toast("请选择购车日期！");
		return false;
	}
	return true;
}
</script>

<script id="vehicle-tpl" type="text/html">
	<option value="-1">请选择</option>
	{{each data as item i}}	
	<option value={{item.id}}   >{{item.name}}</option>
	{{/each}}
</script>
</body>
</html>
